Quy trình Xác thực useFormState của React: Làm chủ Xác thực Biểu mẫu Đa giai đoạn

Xây dựng các biểu mẫu phức tạp với khả năng xác thực mạnh mẽ là một thách thức phổ biến trong phát triển web hiện đại. Hook useFormState của React cung cấp một cách mạnh mẽ và linh hoạt để quản lý trạng thái và xác thực biểu mẫu, cho phép tạo ra các quy trình xác thực đa giai đoạn tinh vi. Hướng dẫn toàn diện này sẽ dẫn dắt bạn qua từng bước, từ việc hiểu các khái niệm cơ bản đến việc triển khai các chiến lược xác thực bất đồng bộ nâng cao.

Tại sao cần Xác thực Biểu mẫu Đa giai đoạn?

Xác thực biểu mẫu truyền thống, một giai đoạn có thể trở nên cồng kềnh và kém hiệu quả, đặc biệt khi xử lý các biểu mẫu chứa nhiều trường hoặc có các phụ thuộc phức tạp. Xác thực đa giai đoạn cho phép bạn:

• Cải thiện Trải nghiệm Người dùng: Cung cấp phản hồi tức thì cho các phần cụ thể của biểu mẫu, hướng dẫn người dùng hoàn thành quy trình một cách hiệu quả hơn.
• Nâng cao Hiệu suất: Tránh các kiểm tra xác thực không cần thiết trên toàn bộ biểu mẫu, tối ưu hóa hiệu suất, đặc biệt đối với các biểu mẫu lớn.
• Tăng khả năng Bảo trì Mã nguồn: Chia nhỏ logic xác thực thành các đơn vị nhỏ hơn, dễ quản lý, giúp mã nguồn dễ hiểu, dễ kiểm thử và bảo trì hơn.

Tìm hiểu về useFormState

Hook useFormState (thường có sẵn trong các thư viện như react-use hoặc các triển khai tùy chỉnh) cung cấp một cách để quản lý trạng thái biểu mẫu, lỗi xác thực và xử lý việc gửi đi. Các chức năng cốt lõi của nó bao gồm:

• Quản lý Trạng thái: Lưu trữ các giá trị hiện tại của các trường trong biểu mẫu.
• Xác thực: Thực thi các quy tắc xác thực đối với giá trị của biểu mẫu.
• Theo dõi Lỗi: Theo dõi các lỗi xác thực liên quan đến từng trường.
• Xử lý Gửi đi: Cung cấp các cơ chế để gửi biểu mẫu và xử lý kết quả gửi đi.

Xây dựng một Quy trình Xác thực Cơ bản

Hãy bắt đầu với một ví dụ đơn giản về biểu mẫu hai giai đoạn: thông tin cá nhân (tên, email) và thông tin địa chỉ (đường, thành phố, quốc gia).

Bước 1: Định nghĩa Trạng thái Biểu mẫu

Đầu tiên, chúng ta định nghĩa trạng thái ban đầu của biểu mẫu, bao gồm tất cả các trường:

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

Bước 2: Tạo các Quy tắc Xác thực

Tiếp theo, chúng ta định nghĩa các quy tắc xác thực. Trong ví dụ này, chúng ta sẽ yêu cầu tất cả các trường không được để trống và đảm bảo email có định dạng hợp lệ.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'Trường này là bắt buộc.';
  }

  if (fieldName === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    return 'Định dạng email không hợp lệ.';
  }

  return null; // Không có lỗi
};

Bước 3: Triển khai Hook useFormState

Bây giờ, hãy tích hợp các quy tắc xác thực vào thành phần React của chúng ta bằng cách sử dụng một hook useFormState (giả định):

import React, { useState } from 'react';

// Giả sử một triển khai tùy chỉnh hoặc thư viện như react-use
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // Xác thực khi thay đổi để có UX tốt hơn (tùy chọn)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); // Hợp nhất với các lỗi hiện có
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // Gửi biểu mẫu
      console.log('Biểu mẫu đã được gửi:', values);
      alert('Biểu mẫu đã được gửi!'); // Thay thế bằng logic gửi thực tế
    } else {
      console.log('Biểu mẫu có lỗi, vui lòng sửa lại.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Thông tin Cá nhân
          
            Tên:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Họ:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            Email:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Thông tin Địa chỉ
          
            Đường:
            
            {errors.street && {errors.street}}
          
          

          
            Thành phố:
            
            {errors.city && {errors.city}}
          
          

          
            Quốc gia:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Trước}
        {currentStage < 2 && Tiếp theo}
        {currentStage === 2 && Gửi}
      
    
  );
};

export default MyForm;

Bước 4: Triển khai Điều hướng Giai đoạn

Sử dụng các biến trạng thái để quản lý giai đoạn hiện tại của biểu mẫu và hiển thị phần biểu mẫu tương ứng dựa trên giai đoạn hiện tại.

Các Kỹ thuật Xác thực Nâng cao

Xác thực Bất đồng bộ

Đôi khi, việc xác thực đòi hỏi tương tác với máy chủ, chẳng hạn như kiểm tra xem tên người dùng có khả dụng hay không. Điều này yêu cầu xác thực bất đồng bộ. Dưới đây là cách tích hợp nó:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Tên người dùng khả dụng
    } else {
      return 'Tên người dùng đã được sử dụng.';
    }
  } catch (error) {
    console.error('Lỗi khi kiểm tra tên người dùng:', error);
    return 'Lỗi khi kiểm tra tên người dùng. Vui lòng thử lại.'; // Xử lý lỗi mạng một cách mượt mà
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // Gửi biểu mẫu
        console.log('Biểu mẫu đã được gửi:', values);
        alert('Biểu mẫu đã được gửi!'); // Thay thế bằng logic gửi thực tế
      } else {
        console.log('Biểu mẫu có lỗi, vui lòng sửa lại.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting // Tùy chọn: hiển thị thông báo tải trong khi xác thực
  };
};

Ví dụ này tích hợp một hàm validateUsername thực hiện một cuộc gọi API để kiểm tra tính khả dụng của tên người dùng. Hãy đảm bảo bạn xử lý các lỗi mạng tiềm ẩn và cung cấp phản hồi phù hợp cho người dùng.

Xác thực có Điều kiện

Một số trường có thể chỉ yêu cầu xác thực dựa trên giá trị của các trường khác. Ví dụ, trường 'Trang web công ty' có thể chỉ bắt buộc nếu người dùng cho biết họ đang đi làm. Hãy triển khai xác thực có điều kiện trong các hàm xác thực của bạn:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Trang web công ty là bắt buộc nếu bạn đang đi làm.';
  }
  return validateField(fieldName, value); // Ủy quyền cho xác thực cơ bản
};

Các Quy tắc Xác thực Động

Đôi khi, bản thân các quy tắc xác thực cần phải động, dựa trên các yếu tố hoặc dữ liệu bên ngoài. Bạn có thể đạt được điều này bằng cách truyền các quy tắc xác thực động làm đối số cho các hàm xác thực của mình:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `Trường này phải ít hơn ${rules[fieldName].maxLength} ký tự.`;
  }
  return validateField(fieldName, value); // Ủy quyền cho xác thực cơ bản
};

Xử lý Lỗi và Trải nghiệm Người dùng

Xử lý lỗi hiệu quả là rất quan trọng để có trải nghiệm người dùng tích cực. Hãy xem xét những điều sau:

• Hiển thị Lỗi Rõ ràng: Đặt thông báo lỗi gần các trường nhập liệu tương ứng. Sử dụng ngôn ngữ rõ ràng và súc tích.
• Xác thực Thời gian thực: Xác thực các trường khi người dùng nhập, cung cấp phản hồi ngay lập tức. Hãy lưu ý đến các tác động về hiệu suất; sử dụng debounce hoặc throttle cho các lệnh gọi xác thực nếu cần thiết.
• Tập trung vào Lỗi: Sau khi gửi đi, hãy tập trung sự chú ý của người dùng vào trường đầu tiên có lỗi.
• Khả năng Tiếp cận: Đảm bảo các thông báo lỗi có thể truy cập được bởi người dùng khuyết tật, sử dụng các thuộc tính ARIA và HTML ngữ nghĩa.
• Quốc tế hóa (i18n): Triển khai quốc tế hóa phù hợp để hiển thị thông báo lỗi bằng ngôn ngữ ưa thích của người dùng. Các dịch vụ như i18next hoặc API Intl gốc của JavaScript có thể hỗ trợ.

Các Thực tiễn Tốt nhất cho Xác thực Biểu mẫu Đa giai đoạn

• Giữ Quy tắc Xác thực Ngắn gọn: Chia nhỏ logic xác thực phức tạp thành các hàm nhỏ hơn, có thể tái sử dụng.
• Kiểm thử Kỹ lưỡng: Viết các bài kiểm thử đơn vị (unit test) để đảm bảo tính chính xác và độ tin cậy của các quy tắc xác thực.
• Sử dụng Thư viện Xác thực: Cân nhắc sử dụng một thư viện xác thực chuyên dụng (ví dụ: Yup, Zod) để đơn giản hóa quy trình và cải thiện chất lượng mã nguồn. Các thư viện này thường cung cấp xác thực dựa trên lược đồ (schema-based), giúp việc định nghĩa và quản lý các quy tắc xác thực phức tạp trở nên dễ dàng hơn.
• Tối ưu hóa Hiệu suất: Tránh các kiểm tra xác thực không cần thiết, đặc biệt là trong quá trình xác thực thời gian thực. Sử dụng các kỹ thuật ghi nhớ (memoization) để lưu trữ kết quả xác thực vào bộ nhớ đệm.
• Cung cấp Hướng dẫn Rõ ràng: Hướng dẫn người dùng qua quy trình hoàn thành biểu mẫu bằng các chỉ dẫn rõ ràng và gợi ý hữu ích.
• Cân nhắc Tiết lộ Tăng tiến (Progressive Disclosure): Chỉ hiển thị các trường liên quan cho mỗi giai đoạn, giúp đơn giản hóa biểu mẫu và giảm tải nhận thức.

Các Thư viện và Phương pháp Thay thế

Mặc dù hướng dẫn này tập trung vào một hook useFormState tùy chỉnh, có một số thư viện biểu mẫu xuất sắc khác cung cấp chức năng tương tự, thường đi kèm với các tính năng bổ sung và tối ưu hóa hiệu suất. Một số lựa chọn thay thế phổ biến bao gồm:

• Formik: Một thư viện được sử dụng rộng rãi để quản lý trạng thái biểu mẫu và xác thực trong React. Nó cung cấp một cách tiếp cận khai báo để xử lý biểu mẫu và hỗ trợ nhiều chiến lược xác thực khác nhau.
• React Hook Form: Một thư viện tập trung vào hiệu suất, tận dụng các thành phần không được kiểm soát (uncontrolled components) và API ref của React để giảm thiểu việc render lại. Nó cung cấp hiệu suất tuyệt vời cho các biểu mẫu lớn và phức tạp.
• Final Form: Một thư viện linh hoạt hỗ trợ nhiều framework UI và thư viện xác thực khác nhau. Nó cung cấp một API linh hoạt và có thể mở rộng để tùy chỉnh hành vi của biểu mẫu.

Việc chọn thư viện phù hợp phụ thuộc vào các yêu cầu và sở thích cụ thể của bạn. Hãy xem xét các yếu tố như hiệu suất, tính dễ sử dụng và bộ tính năng khi đưa ra quyết định.

Các Lưu ý về Quốc tế hóa

Khi xây dựng biểu mẫu cho đối tượng người dùng toàn cầu, việc xem xét quốc tế hóa và địa phương hóa là rất cần thiết. Dưới đây là một số khía cạnh chính:

• Định dạng Ngày và Giờ: Sử dụng các định dạng ngày và giờ theo địa phương cụ thể để đảm bảo tính nhất quán và tránh nhầm lẫn.
• Định dạng Số: Sử dụng các định dạng số theo địa phương cụ thể, bao gồm ký hiệu tiền tệ và dấu phân cách thập phân.
• Định dạng Địa chỉ: Điều chỉnh các trường địa chỉ cho phù hợp với định dạng của các quốc gia khác nhau. Một số quốc gia có thể yêu cầu mã bưu điện trước tên thành phố, trong khi những quốc gia khác có thể không có mã bưu điện.
• Xác thực Số điện thoại: Sử dụng thư viện xác thực số điện thoại hỗ trợ các định dạng số điện thoại quốc tế.
• Mã hóa Ký tự: Đảm bảo biểu mẫu của bạn xử lý chính xác các bộ ký tự khác nhau, bao gồm Unicode và các ký tự không phải Latinh khác.
• Bố cục từ Phải sang Trái (RTL): Hỗ trợ các ngôn ngữ RTL như tiếng Ả Rập và tiếng Do Thái bằng cách điều chỉnh bố cục biểu mẫu cho phù hợp.

Bằng cách xem xét các khía cạnh quốc tế này, bạn có thể tạo ra các biểu mẫu dễ tiếp cận và thân thiện với người dùng cho đối tượng toàn cầu.

Kết luận

Việc triển khai một quy trình xác thực biểu mẫu đa giai đoạn với hook useFormState của React (hoặc các thư viện thay thế) có thể cải thiện đáng kể trải nghiệm người dùng, nâng cao hiệu suất và tăng khả năng bảo trì mã nguồn. Bằng cách hiểu các khái niệm cốt lõi và áp dụng các thực tiễn tốt nhất được nêu trong hướng dẫn này, bạn có thể xây dựng các biểu mẫu mạnh mẽ và có khả năng mở rộng, đáp ứng được yêu cầu của các ứng dụng web hiện đại.

Hãy nhớ ưu tiên trải nghiệm người dùng, kiểm thử kỹ lưỡng và điều chỉnh các chiến lược xác thực của bạn cho phù hợp với các yêu cầu cụ thể của dự án. Với việc lập kế hoạch và thực hiện cẩn thận, bạn có thể tạo ra các biểu mẫu vừa hoạt động tốt vừa mang lại trải nghiệm thú vị khi sử dụng.

Tìm hiểu thêm

• Tài liệu chính thức của React
• Tài liệu Formik
• Tài liệu React Hook Form